<template>
  <div class="task-select-device">
    <div class="container">
      <div class="title-box">
        <span class="title">请点击设备设置相应的设备动作</span>
      </div>
      <div class="device-list-box iosScrollBug">
        <div class="device-list" v-for="device in deviceList" v-ev:tap="[selectDevice, device]">
          <i class="icon icon-{{device.type}}"></i>
          <span class="device-name">{{device.name}}</span>
          <i class="more gray"></i>
        </div>
      </div>
    </div>
    <iframe src="./static/logo.png" style="display:none"></iframe>
  </div>
</template>

<script>
  import { globalMixins } from '../../mixins'

  export default {
    mixins: [globalMixins],

    components: {
    },

    data () {
      return {
        deviceList: [
          {
            name: '灯01',
            type: 'lamp'
          },
          {
            name: '灯02',
            type: 'lamp'
          },
          {
            name: '灯03',
            type: 'lamp'
          },
          {
            name: '灯04',
            type: 'lamp'
          },
          {
            name: '厨房插座',
            type: 'socket'
          }
        ]
      }
    },
    route: {
      data () {
        this.setTitle('选择设备')
      }
    },
    ready () {
    },
    methods: {
      /**
       * 选择设备
       * @param  {[type]} device [description]
       * @return {[type]}        [description]
       */
      selectDevice (device) {
        console.log(device)
      }
    }
  }
</script>

<style lang="stylus">
  @import '../../../shared/assets/style/common'

  .task-select-device
    .container
      width 100%
      height 100%
      padding 0 0.5rem
      box-sizing border-box
    .title-box
      width 100%
      height 1.6rem
      line-height 1.6rem
      color #838383
      padding-left 0.5rem
    .device-list-box
      width 100%
      max-height 80vh
      padding 0 0.5rem 0.2rem
      box-sizing border-box
      border 1px solid #d7d7d7
      background #fff
      overflow auto
      .device-list
        height 1.3rem
        border-bottom 1px solid #d7d7d7
        position relative
        .icon
        .more
          display block
          width 0.8rem
          height 0.8rem
          position absolute
          left 0
          top 50%
          transform translate3d(0, -50%, 0)
        .device-name
          display block
          width 100%
          height 1.3rem
          line-height 1.4rem
          padding 0 1rem
          box-sizing border-box
          color #444444
          text-overflow ellipsis
          white-space nowrap
        .more
          width 0.5rem
          height 0.5rem
          left auto
          right 0.2rem
          background-color transparent
          opacity 0.8

</style>
